import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Icon, Form, Modal, Upload, message } from 'antd';

import styles from './ImageUploader.less';
import { solo } from '../../../common/solo';

import { wrapFileList } from '../../../utils/utils';

import uuid from 'uuid';
let file = [];

@Form.create()
export default class ImageUploader1 extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    title: '',
    uploadData: {
      projectId: '', //业务ID
      customerId: '', //客户ID
      attachType: '', //0：图片；1：视频
      attachKind: '', //附近种类
      type: '', //图片类型
    },
    previewVisible: false,
    // uploadButtonChangeState: true,
    fileListName: '',
    fileType: '',
    previewImage: '',
    fileList: [
      // {
      //   uid: -1,
      //   url:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      // }
    ],
  };

  fileList = [];

  componentDidMount() {
    this.setState({
      fieldName: this.props.fieldName,
      fileList: this.props.fileList,
    });
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = file => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => {
    // console.log("handleChange11111222222", fileList)
    this.setState({
      fileList,
    });
  };
  handleRemoveImage = e => {
    // console.log('handleRemoveImage', e);
    this.props.onRemoveImage && this.props.onRemoveImage(this.state.fieldName, e);
  };

  handleUploadChange2 = info => {
    const fileList = wrapFileList(info);
    // console.log("handleUploadChange2", fileList)
    this.setState({ fileList });

    this.props.onImageUploaded && this.props.onImageUploaded(this.state.fieldName, fileList);
  };

  // handleUploadChange = info => {

  //   console.log("handleUploadChange",info);

  //   if (info.file.status === 'done') {

  //     console.log("this.state.fileList=",this.state.fileList);
  //     const newFileList = [...this.state.fileList];

  //     newFileList.push(info.file.response.body.key);
  //     this.setState({
  //       fileList: newFileList,
  //       fileListName: info.file.response.body.key,
  //       fileType: info.file.response.body.type,
  //     });

  //     this.props.onImageUploaded &&
  //       this.props.onImageUploaded(this.state.fileListName, this.state.fileType, info.fileList);

  //     if (info.file.response.body.key) {
  //       message.success('图片上传成功');
  //     } else {
  //       message.error('图片上传失败');
  //     }
  //   } else if (info.file.status === 'err') {
  //     message.error(`${info.file.name} 照片上传失败`);
  //   } else if (info.file.status === 'uploading') {
  //   }
  // };

  beforeUpload = file => {
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/jpg';
    const isJPEG = file.type === 'image/png';
    if (!isJPG && !isPNG && !isJPEG) {
      message.error('图片格式错误!');
      return false;
    }
    return true;
  };

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const fieldName = this.props.fieldName ? this.props.fieldName : null;
    const label = this.props.label ? this.props.label : null;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">{label}</div>
      </div>
    );
    const max = this.props.maxCount ? this.props.maxCount : 1;
    const size = this.props.size ? this.props.size : 'normal';
    const className = size == 'small' ? styles.smallUploader : styles.normalUploader;
    const showRemoveIconType = this.props.showRemoveIconType ? true : false;

    const dataProps = {};

    dataProps.data = {
      projectId: '', //业务ID
      customerId: '', //客户ID
      attachType: '0', //0：图片；1：视频
      attachKind: '', //附件种类
      type: '', //图片类型
    };

    if (this.props.attachmentData) {
      dataProps.data = this.props.attachmentData;
    } else {
    }
    // console.log("this.props.attachmentData",this.props.attachmentData)

    return (
      <div className={className}>
        <div className={styles.imageActions}>
          <Upload
            name="file"
            listType="picture-card"
            action={solo.uploadImg}
            data={this.props.attachmentData}
            beforeUpload={this.beforeUpload}
            onPreview={this.handlePreview}
            onChange={this.handleUploadChange2}
            onRemove={this.handleRemoveImage}
            showUploadList={{ showRemoveIcon: showRemoveIconType }}
            defaultFileList={this.props.fileList}
          >
            {this.state.fileList && this.state.fileList.length >= max ? null : uploadButton}
          </Upload>
        </div>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}
